<!DOCTYPE html>
<html>
<head>
	<title>Index</title>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="css/style.css" />
	<style>
		#maincontent {
			width: 90%;
			margin: 20px auto 0;
		}
		.form-box {
			display: block;
			margin: 0 0 6px 0;
			padding: 6px;
			clear: both;
		}
		label {
			width: 50%;
			float: left;
			font-size: 18px;
			font-weight: 300;
			font-family: Sansation;
		}
		input[type='text'] {
			padding: 4px;
			font-size: 12px;
			margin-left: 10px;
			float: right;
			width: 40%;
		}
		.submit {
			width: 100%;
			margin: 10px 0 0;
			font-family: Sansation;
			font-size: 18px;
		}
		.top-logo {
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
	<div class="header-container">
		<header class="clearfix">
			<h1 class="title">Register</h1>
		</header>
	</div>
	<div class="main-container">
		<div class="wrapper clearfix">
			<div id="maincontent">
				<img src="images/groupalarmlogo.png" class="top-logo" />
				<div id="register-mail" style="display: none;">
					<p>A mail has been send to your mailaccount.</p>

					<p>click refresh if you clicked on the link in de mail</p>
					<button class="refresh">Refresh</button>
					<br />
					<p>Click resend or enter your mail address to send the mail to another account.</p>
					<button class="resend">Resend</button>
					<br />
					<label for="id">Email</label><input class="email" type="text" />
					<button class="submit">Verstuur</button>

					<div class="showdata"></div>
				</div>
				<div id="register-form" style="display: none;">
					<div class="form-box">
						<label for="id">Naam</label><input class="fullname" type="text" />
					</div>
					<div class="form-box">
						<label for="id">Nickname</label><input class="nickname" type="text" />
					</div>
					<div class="form-box">
						<label for="id">Primair telefoonnummer</label><input class="tel" type="text" />
					</div>
					<div class="form-box">
						<label for="id">Backup telnr</label><input class="backuptel" type="text" />
					</div>
					<div class="form-box">
						<label for="id">Email</label><input class="email" type="text" />
					</div>
					<button class="submit">I'm finished!</button>
					<div class="showdata"></div>
					<p class="paftermail" style="display: none;">Klik op refresh als je de mail geopend hebt.</p>
					<button class="refresh buttonaftermail" style="display: none;">Refresh</button>
				</div>
			</div>
		</div> <!-- #main -->
	</div> <!-- #main-container -->

	<!-- here comes the javascript -->
	<script src="js/jquery-min.js"></script>
	<script src="js/cordova-2.0.0.js"></script>
	<script src="js/plugins.js"></script>
	<script src="js/ajax.js"></script>
	<script src="js/register.js"></script>
	<!-- this is where we put our custom functions -->
	<script src="js/script.js"></script>
</body>
</html>